作品 Demo 連結: 傳送門

作品目標：取得現在時間，並動態顯示在畫面之中
難易度：★☆☆☆☆

HTML

<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
  </div>
</div>

CSS 的部分
原版線上教學指針 0 度角時是指向 9 點鐘方向，
我這裡透過修改 CSS 讓他 0 度角時即12點鐘方向
之後寫程式就不用額外再加 90 deg 囉!

.hand {
  width: 6px;
  height: 50%;
  transform-origin: 50% 100%;
  background-color: black;
  position: absolute;
  left:50%;
}

【第一步：設定計時器】

// 設定計時器：每秒執行一次 timer 函式
setInterval(timer, 1000);

這裡設定每 1000 毫秒(1秒鐘) 執行一次 timer 函數

【第二步：設定計時器】

我們先來處理秒針就好，製作完成後其餘的可以類推

//宣告待會兒計時器中會用到的變數
var now;  //儲存當下日期時間等資料

var second;  //儲存當下秒數
var secondDeg;  // 儲存秒針的度數
var secondHand = document.querySelector('.second-hand');  // 選取器指向秒針

function timer(){
  now = new Date();  //  透過 new 一個 Date() 取得當下時間

  second = now.getSeconds();  // 使用 getSeconds() 取得當下的秒數 (0-59)
  secondDeg = ((second / 60) * 360);  // 利用秒數計算出指針的角度
  secondHand.style.transform = `rotate(${secondDeg}deg)`;  // 將資料圖像化
}

我們將新 new 出來的 Date() 指定給 now 變數
關於 Date() 其實可以取得很多關於時間、日期、年 等時間相關的資訊

我們今天會用到的是以下三個:
1. getHours()
2. getMinutes()
3. getSeconds()
如字面上意思，就是取得 new 出 Date() 當下的 小時/分/秒
取出來的會是一個數字，並且將秒數指派到我們定義的變數 second

如果想知道更多 Date() 可以怎麼玩，
請參閱 W3C 的詳細介紹: 傳送門

關於指針度數計算

secondDeg = (second / 60) * 360;

(目前秒數 / 一整圈的秒數) * 一圈360度
這個... 我真的不知道該怎麼解釋了...
(數學系的出來面對!!! XD

最後就是將我們所取得的資訊透過程式渲染在畫面上

secondHand.style.transform = `rotate(${secondDeg}deg)`;

.style介紹：
.style 後面接的 CSS 項目是採用 Lower Camel Case 大小寫法
意思就是第一個單字的開頭小寫，之後的單字開頭第一個字母都是大寫
例如：border-radius => borderRadius

右側字串的部分我這裡使用的是 ES6 可換行的反斜線!
在字串中如果要使用變數的話可以用 ${varName} 包起來，

rotate(${secondDeg}deg) 相等於 'rotate(' + second + 'deg)'

直接翻譯成 jQuery 的寫法的話其實就是

secondHand.css({
    transform: `rotate(${secondDeg}deg)`
});

這樣子我們就完成了秒針的部分了!

【第三步：完成剩餘的分針、時針】

var second;
var secondDeg;
var secondHand = document.querySelector('.second-hand');

var min;
var minDeg;
var minHand = document.querySelector('.min-hand');

var hour;
var hourDeg;
var hourHand = document.querySelector('.hour-hand');

function timer(){
  now = new Date();

  second = now.getSeconds();
  secondDeg = (second / 60) * 360;
  secondHand.style.transform = `rotate(${secondDeg}deg)`;

  min = now.getMinutes();
  minDeg = (min / 60) * 360;
  minHand.style.transform = `rotate(${minDeg}deg)`;

  hour = now.getHours();
  hourDeg = (hour / 12) * 360;
  hourHand.style.transform = `rotate(${hourDeg}deg)`;
}

直接改改內容就完成啦 (好敷衍!!
比較要注意的是 hourDeg 的角度計算部分
因為時鐘一圈是 12 小時，所以是 / 12
(這個感覺其實也不用解釋... Orz

這樣子我們就完成啦!!!
勇者 LEVEL UP!!!